<template>
    <view>
        <view v-if="visible" class="activity-wrap">
            <image src="https://julimeng-prod.oss-cn-hangzhou.aliyuncs.com/managehub/MP/activity/bg.png" class="bg"
                mode="widthFix"></image>
            <view @click="handleGo">
                <image :src="`https://julimeng-prod.oss-cn-hangzhou.aliyuncs.com/managehub/MP/activity/${type}.png`"
                    :class="[type]" mode="widthFix" />
            </view>
            <view class="btn" @click="handleClose">
                <uni-icons type="close" size="28" color="#fff" />
            </view>
            <view v-if="type === 'reward'" class="amount" @click="handleGo">¥ {{ money }}</view>
        </view>
        <movable-area v-if="activityIsOpen" class="marea">
            <movable-view class="move" direction="all" x="580rpx" y="750rpx">
                <view @click.stop="handleActivity">
                    <image src="https://julimeng-prod.oss-cn-hangzhou.aliyuncs.com/managehub/MP/activity/micon.png" />
                </view>
            </movable-view>
        </movable-area>
    </view>
</template>


<script>
import { mapGetters } from 'vuex'
import { openRewardSubscribe } from "@/utils/SubscribeMessage";

export default {
    props: {
        type: {
            type: String,
            default: 'new' // new-新注册. no-query未查询 normal每日红包 reward活动奖励-余额
        },
        value: {
            type: Boolean,
            default: false
        },
        money: {
            type: [Number, String],
            default: ''
        }
    },
    computed: {
        visible: {
            get() {
                return !!this.value
            },
            set(val) {
                this.$emit('input', !!val)
            }
        },
        ...mapGetters(['activityIsOpen', 'activityIsBlack', 'activityIsNew', 'activityNoQuery',]),
    },
    data() {
        return {
        }
    },
    methods: {
        handleClose() {
            this.visible = false
            this.$store.commit('SET_SCROLL_LOCK', false)
            uni.showTabBar()
        },
        async handleGo() {
			// #ifdef MP-WEIXIN
            if (this.type !== 'reward') {
                await openRewardSubscribe()
            }
			// #endif
            this.handleClose()
            uni.navigateTo({
                url: this.type === 'reward' ? '/pagesUser/activity/profit' : `/pagesWater/taxSearch/index`
            })
        },
        handleActivity() {
            if (this.activityIsBlack) {
                this.$util.Tips('活动已结束')
            } else {
                console.log('----------')
                uni.navigateTo({
                    url: '/pagesUser/activity/activity'
                })
            }
        }
    }

}
</script>

<style lang="scss" scoped>
.marea {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--status-bar-height);
    bottom: 0;
    z-index: 999;
    pointer-events: none;
    width: 100%;
    height: calc(100vh - var(--status-bar-height) - env(safe-area-inset-bottom));

    image {
        width: 160rpx;
        height: 121rpx;
    }

    .move {
        pointer-events: all;
         width: 160rpx;
        height: 121rpx;
    }
}

.activity-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(#000, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .amount {
        position: fixed;
        top: 50%;
        font-size: 80rpx;
        color: #F60420;
        z-index: 999;
        left: 50%;
        font-weight: bold;
        transform: translate(-50%, -30rpx);
    }

    .btn {
        position: relative;
        z-index: 99;
    }

    image {
        position: relative;
        z-index: 10;

        &.bg {
            position: absolute;
            width: 750rpx;
            left: 0;
            top: 50%;
            transform: translateY(calc(-50% - 24px));
            z-index: 1;
        }

        &.new {
            width: 750rpx;
        }

        &.normal {
            width: 680rpx;
        }

        &.no-query {
            width: 645rpx;
        }

        &.reward {
            width: 688rpx;
        }
    }
}
</style>